import { MDXRemote } from 'next-mdx-remote/rsc';
import { getPost } from '@/app/lib/posts';
import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
import { notFound } from 'next/navigation';

export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;
  const post = await getPost(id);
  if (!post) {
    return notFound();
  }
  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          { label: 'Invoices', href: '/dashboard/posts' },
          {
            label: 'View Invoice',
            href: `/dashboard/post/${id}`,
            active: true,
          },
        ]}
      />
      <div className=" text-center">{post.title}</div>
      <div className=" text-center">{post.birthtime.toLocaleDateString()}</div>
      <MDXRemote source={post?.content} />
    </main>
  );
}
